﻿@* Generator: Template TypeVisibility: Internal GeneratePrettyNames: true *@

@inherits LogDashboard.Views.RazorPage

@using System.Collections.Generic
@using LogDashboard.Extensions
@using LogDashboard.Models
@using LogDashboard.Views
@{
    Layout = new _layout { Context = Context, Section = { ["Scripts"] = $"<script> var output = JSON.parse('{Raw(ViewData["ChartData"])}');</script> <script src='{Context.Options.PathMatch}/js.home.js'></script>" }, ViewData = ViewData };
    var logs = (IEnumerable<ILogModel>)ViewData["Model"];
}
<div class="container-fluid">
    <div class="row">
        <div class="col-md-3" style="cursor:pointer;" onclick="(window.location.href='@Context.Options.PathMatch/Dashboard/BasicLog?All=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewData["allCount"].ToString()</span>
                        <span class="font-weight-light">所有日志</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="fa fa-reply-all"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" style="cursor:pointer;" onclick="(window.location.href='@Context.Options.PathMatch/Dashboard/BasicLog?Unique=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewData["unique"].ToString()</span>
                        <span class="font-weight-light">不重复的日志</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="fa fa-question"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" style="cursor:pointer;" onclick="(window.location.href='@Context.Options.PathMatch/Dashboard/BasicLog?ToDay=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewData["todayCount"].ToString()</span>
                        <span class="font-weight-light">今天的日志</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="fa fa-external-link-square"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3" style="cursor:pointer;" onclick="(window.location.href='@Context.Options.PathMatch/Dashboard/BasicLog?Hour=true')">
            <div class="card p-4">
                <div class="card-body d-flex justify-content-between align-items-center">
                    <div>
                        <span class="h4 d-block font-weight-normal mb-2">@ViewData["hourCount"].ToString()</span>
                        <span class="font-weight-light">一小时之内</span>
                    </div>
                    <div class="h2 text-muted">
                        <i class="icon icon-clock"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#hourChartPanel" onclick="getLogChart(1)" role="tab" aria-controls="overview" aria-selected="true">小时</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#dayChartPanel" onclick="getLogChart(2)" role="tab" aria-controls="environment" aria-selected="false">天</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#weekChartPanel" onclick="getLogChart(3)" role="tab" aria-controls="environment" aria-selected="false">周</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#monthChartPanel" onclick="getLogChart(4)" role="tab" aria-controls="environment" aria-selected="false">月</a>
                </li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="hourChartPanel" role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="hourChart" width="100%" height="20"></canvas>
                    </div>
                </div>
                <div class="tab-pane" id="dayChartPanel" role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="dayChart" width="100%" height="20"></canvas>
                    </div>
                </div>
                <div class="tab-pane" id="weekChartPanel" role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="weekChart" width="100%" height="20"></canvas>
                    </div>
                </div>
                <div class="tab-pane" id="monthChartPanel" role="tabpanel">
                    <div class="table-responsive">
                        <canvas id="monthChart" width="100%" height="20"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card" style="margin-top: 3%">
    <div class="card-header bg-light">
        最近十条
        <i class="fa fa-refresh" onclick="loadList(1,10)" style="float: right"></i>
    </div>
    <div class="card-body" id="LogList">
        <div class="table-responsive">
            <table class="table row mx-0">
                <thead class="w-100">
                    <tr class="row mx-0">
                        <th class="col-1">Id</th>
                        <th class="col-3">Logger</th>
                        <th class="col-1">级别</th>
                        <th class="col-4">消息</th>
                        <th class="col-2">时间</th>
                        <th class="col-1">详情</th>
                    </tr>
                </thead>
                <tbody class="w-100">
                    @foreach (var item in logs)
                    {
                        <tr class="row mx-0">
                            <td class="col-1"><a href="javascript:void(0);" onclick="logInfo('@item.Id.ToString()')">@item.Id.ToString()</a></td>
                            <td class="col-3">@item.Logger</td>
                            <td class="col-1"><button class="btn btn-outline-@item.Level.ToUpper()">@item.Level.ToUpper()</button></td>
                            <td class="col-4" onclick="$(this).next().show();$(this).css('display', 'none');">
                                @{
                                    var message = item.Message;
                                    if (message.Length > 90)
                                    {
                                        message = message.Substring(0, 90) + "........";
                                    }
                                }
                                @message
                            </td>
                            <td class="col-4" style="display: none;" onclick="$(this).prev().show();$(this).css('display', 'none');">@item.Message</td>
                            <td class="col-2">@item.LongDate.ToString("yyyy-MM-dd HH:mm:ss")</td>
                            <td class="col-1"><a href="javascript:void(0);" onclick="logInfo('@item.Id.ToString()-info', 'logInfoModal', 'logInfoBody')">详情</a></td>
                            <div style="display: none" id="@item.Id.ToString()-info">@Raw(item.ToJsonString())</div>
                        </tr>
                    }
                </tbody>
            </table>
        </div>
        <div class="modal fade show" id="logInfoModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">日志详情</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body" id="logInfoBody">

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>